<script setup>
import CommonModal from "../modal/CommonModal.vue";
import { ref, computed } from "vue";
import { updateOrderSubStatus } from "@/api/goods";
import { ElMessage } from "element-plus";
import { useOrder } from "@/store/useOrder";

const orderStore = useOrder();
const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 延长交付
const ruleFormRef = ref();
const delayModalShow = ref(false);
const delayForm = ref({});
const delayFormRules = ref({
  delayDays: {
    required: true,
    message: "请输入延长天数",
    trigger: "blur",
  },
  delayReason: {
    required: true,
    message: "请输入延长原因",
    trigger: "blur",
  },
});
const submitDelayForm = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loading.value = true;
      try {
        await updateOrderSubStatus({
          orderId: props.orderDetails.id,
          stepStatus: 5,
          ...delayForm.value,
        });
        ElMessage.success("操作成功");
        orderStore.setReloadOrderDetails(true);
        delayModalShow.value = false;
      } catch (error) {
        console.error(error);
      } finally {
        loading.value = false;
      }
    } else {
      console.log(fields);
    }
  });
};

// 发起验收
const checkModalShow = ref(false);
const loading = ref(false);
const checkHandle = () => {
  checkModalShow.value = true;
};
const checkConfirmHandle = async () => {
  loading.value = true;
  try {
    await updateOrderSubStatus({
      orderId: props.orderDetails.id,
      stepStatus: 6,
    });
    ElMessage.success("操作成功");
    orderStore.setReloadOrderDetails(true);
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 获取剩余交付时间
const getRemainingTime = computed(() => {
  const deliverDays = props.orderDetails.versionInfo.deliverDays;
  const delayDays = props.orderDetails.delayDays;
  const startTime = new Date(props.orderDetails.startTime);
  const deliveryDate = new Date(
    startTime.getTime() + ((deliverDays || 0) + (delayDays || 0)) * 24 * 60 * 60 * 1000
  );
  const remainingTime = deliveryDate - new Date();
  // 返回天小时分钟
  const days = Math.floor(remainingTime / (24 * 60 * 60 * 1000));
  const hours = Math.floor((remainingTime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  const minutes = Math.floor(
    ((remainingTime % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) / (60 * 1000)
  );
  // 如果已超时，返回超时的天小时分钟
  if (remainingTime < 0) {
    return {
      days: `${days}天${hours}小时${minutes}分钟`,
      isOverdue: true,
    };
  }
  return {
    days: `${days}天${hours}小时${minutes}分钟`,
    isOverdue: false,
  };
});

// 延长交付
const delayHandle = () => {
  if (props.orderDetails.delayDays && !getRemainingTime.value.isOverdue) {
    ElMessage.error("已在延长交付状态中！");
    return;
  }
  delayModalShow.value = true;
};
</script>

<template>
  <div class="status">
    <img class="icon" src="@/assets/order-jx.png" alt="" />
    <div class="info">
      <h3 class="title">
        服务进行中
        <span
          :style="{
            color: getRemainingTime.isOverdue ? '#FF0000' : '#1dbf73',
          }"
          >{{ getRemainingTime.isOverdue ? "已超时:" : `剩余交付时间：`
          }}{{ getRemainingTime.days }}</span
        >
      </h3>
      <p class="confirm-list">{{ props.orderDetails.requirement }}</p>
      <p class="btn">
        <el-button @click="checkHandle" :loading="loading">发起验收</el-button>
        <el-button @click="delayHandle">延长交付</el-button>
      </p>
    </div>
  </div>
  <CommonModal
    v-if="checkModalShow"
    title="交付验收"
    confirmText="交付"
    @close="checkModalShow = false"
    @confirm="checkConfirmHandle"
    :loading="loading"
  >
    <template #content>
      <div style="padding-top: 10px; max-width: 370px; line-height: 24px">
        请确认已完成客户需求内容,确认后将进入验收阶段。交付后联系买家确认验收,如买家未主动验收,系统将在7天后自动确认验收。
      </div>
    </template>
  </CommonModal>
  <CommonModal
    v-if="delayModalShow"
    title="延长交付"
    @close="delayModalShow = false"
    @confirm="submitDelayForm(ruleFormRef)"
  >
    <template #content>
      <el-form
        class="delay-form"
        ref="ruleFormRef"
        :model="delayForm"
        label-position="top"
        :rules="delayFormRules"
        style="margin-top: 20px"
      >
        <el-form-item label="延长交付天数" prop="delayDays">
          <el-input
            type="number"
            v-model="delayForm.delayDays"
            placeholder="请选择延长交付时间"
            style="height: 40px; width: 470px"
          ></el-input>
        </el-form-item>
        <el-form-item label="延长交付原因" prop="delayReason">
          <el-input
            type="textarea"
            :rows="5"
            :maxlength="1000"
            v-model="delayForm.delayReason"
            placeholder="请输入延长交付原因"
          ></el-input>
        </el-form-item>
      </el-form>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.status {
  display: flex;
}
.icon {
  flex: 0 0 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.info {
  flex: 1;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 12px;
    span {
      padding: 4px 12px;
      background: rgba(29, 191, 115, 0.08);
      border-radius: 12px 12px 12px 12px;
      font-size: 14px;
      color: #1dbf73;
      margin-left: 16px;
    }
  }
  .confirm-list {
    color: rgba(25, 30, 40, 0.48);
    line-height: 24px;
  }
  .btn {
    margin-top: 16px;
    button {
      width: 180px;
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: none;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      &:nth-child(2) {
        background: #ffffff;
        color: rgba(25, 30, 40, 0.6);
        border: 1px solid rgba(25, 30, 40, 0.08);
        margin-left: 16px;
      }
    }
  }
}
</style>

<style>
.delay-form .el-textarea {
  height: 96px;
}
.delay-form .el-textarea__inner {
  height: 96px;
  width: 100%;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 12px;
  box-sizing: border-box;
  box-shadow: none;
}
</style>
